<template>
	<view class="page" :style="{minHeight:$height()}" v-if="videoSwitch == 1">
		
		<view class="class rewoundFlex">
			<view class="enterprise" :class="{check:type == 0}" @click="changeIdx(0)">
				<image src="@/static/image/enterprise.png" mode=""></image>
				<view class="enterpriseTitle">
					行业资讯
				</view>
			</view>
			<view class="industry" :class="{check:type == 1}" @click="changeIdx(1)">
				<image src="@/static/image/industry.png" mode=""></image>
				<view class="industryTitle">
					企业动态
				</view>
			</view>
		</view>
		<view class="searchBox centerFlex">
			<view class="icon">
				<image src="@/static/Icon/serch.png" mode="" class="icon"></image>
			</view>
			<input placeholder="搜索相关的资讯" class="sch" v-model="keywords" />
			<view @click="search()" class="txt">
				搜索
			</view>
		</view>
		<view class="boder">
			<view v-for="(item,index) in list" :key="index" @click="$next(`/pages/index/newsDetail?id=${item.id}`)">
				<view class="Subtitle u-line-1">
					{{item.title}}
				</view>
				<view class="info-box">
					<view class="massge">
						<view class="info">
							{{$utils.subStr($utils.trimHtml(item.content),0,100)}}
						</view>
						<view class="dateBox">
							<view class="dateTitle">
								{{$utils.subStr(item.source,0,8)}}
							</view>
							<view class="date">
								{{item.createDate}}
							</view>
							<view class="follow" style="margin:0;">
								<image src="@/static/image/eye.png" mode="" style="width: 28rpx;  margin: 0 10rpx 0 0; "
									class="Icon"></image>
								<text class="addStyle">{{item.recordNum}}</text>
							</view>
						</view>
					</view>
					<view class="tJBox">
						<image :src="$utils.imagePath(item.image)" class="tuiJian"></image>
					</view>
				</view>
			</view>



		</view>
		<!-- 加载更多 -->
		<u-loadmore v-if="list.length !== 0" :status="status" :load-text="loadText" />
		<image v-else src="@/static/image/empty.png" mode="widthFix" class="is-empty"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoSwitch:0,
				// 页面数据初始化状态
				loadText: {
					loadmore: '轻轻上拉，加载更多',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				type: 0, //新闻类型
				more: false,
				keywords: '', //关键词
				page: 1, //页码
				limit: 10, //条数
				list: [], //新闻 列表

			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.getNewsRes()
		},
		//上拉加载
		onReachBottom() {
			if (this.page == 1) {
				return
			}
			if (this.more) {

				this.getNewsRes()
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}

			uni.setNavigationBarTitle({
				title: this.type == 0 ? "行业资讯" : "企业动态"
			})
			this.getVideoSwitch()
		},
		onShow() {
			this.page = 1
			this.getNewsRes()
			this.getVideoSwitch()
		},
		methods: {
			getVideoSwitch() {
				this.$axios.request(this.$api.getParamsConfig, "GET", {
					config: "VIDEO_SWITCH"
				}).then((val) => {
					this.videoSwitch = val.data.paramValue
				})
			},

			changeIdx(idx) {
				this.type = idx
				this.page = 1
				uni.setNavigationBarTitle({
					title: this.type == 0 ? "行业资讯" : "企业动态"
				})
				this.getNewsRes()
			},
			search() {
				this.page = 1
				this.getNewsRes()
			},
			getNewsRes() {
				this.$axios.request(this.$api.getNewsRes, "GET", {
					page: this.page,
					limit: this.limit,
					keywords: this.keywords,
					type: this.type,
					orderField: 'id',
					order: 'desc'
				}).then((val) => {

					uni.stopPullDownRefresh();
					this.list = this.page == 1 ? val.data.list : this.list.concat(val.data.list)
					if (Math.ceil(val.data.total / this.limit) > this.page) {
						this.more = true;
						this.page++
					} else {
						this.more = false;
					}
				})
			}
		}
	}
</script>

<style>
	@import "../../style/contentFlex.css";

	.page {
		width: 100%;
		border-top: 1rpx solid #F3F4F8;
		background-color: #F3F4F8;
	}

	.class {
		width: 100%;
		padding: 16rpx 40rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;
	}

	.enterprise,
	.industry {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 320rpx;
		height: 154rpx;
		background-color: #BBBBBB;
	}

	.check {
		background-color: #446DFA;
	}

	.industry image,
	.enterprise image {
		width: 64rpx;
		height: 64rpx;
	}

	.industryTitle,
	.enterpriseTitle {
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		text-align: center;
		color: #FFFFFF;
		opacity: 1;
		margin-top: 10rpx;
	}

	.searchBox {
		width: 702rpx;
		height: 72rpx;
		background: rgba(0, 0, 0, 0.06);
		margin: 0 auto 0;
	}

	.icon {
		width: 34rpx;
		height: 28rpx;
	}

	.sch {
		width: 546rpx;
		height: 40rpx;
		margin: 0 16rpx;
		border-right: 2rpx solid #A8B5C5;
	}

	.txt {
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 60rpx;
		color: #3975EA;
		opacity: 1;
	}

	.boder {
		padding: 0 23rpx 30rpx;
		width: 100%;
		background-color: #FFFFFF;
		border-top: 1rpx solid #FFFFFF;
		overflow-y: auto;
		margin: 15rpx auto 23rpx;
	}

	.news {
		height: 50rpx;
		font-size: 36rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		line-height: 46rpx;
		color: #333333;
		opacity: 1;
	}

	.newsMassge {
		height: 28rpx;
		font-size: 20rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 28rpx;
		color: #666666;
		opacity: 1;
	}

	.rediu {
		height: 320rpx;
		margin-bottom: 23rpx;
	}

	.rediu image {
		width: 100%;
		height: 100%;
	}

	.Icon {
		width: 28rpx;
		height: 20rpx;
	}

	.follow {
		margin-bottom: 23rpx;
	}

	.addStyle,
	.dateTitle,
	.date {
		height: 33rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 36rpx;
		color: #999999;
		opacity: 1;
	}

	.info {
		margin-bottom: 16rpx;
	}

	.Subtitle {
		height: 38rpx;
		font-size: 27rpx;
		font-family: "PingFang SC";
		font-weight: 600;
		color: #282828;
		opacity: 1;
		margin: 40rpx auto 14rpx !important;
	}

	.info-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 142rpx;
	}

	.massge {
		width: 466rpx;
		height: 142rpx;
	}

	.tuiJian {
		width: 100%;
		height: 100%;
	}

	.tJBox {
		width: 222rpx;
		height: 142rpx;
	}

	.info {
		width: 466rpx;
		height: 99rpx;
		font-size: 24rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		line-height: 33rpx;
		color: #666666;
		opacity: 1;
	}

	.dateBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 465rpx;
		margin-top: 15rpx;
	}

	.loadMore {
		width: 686rpx;
		height: 64rpx;
		background: #E4E6EA;
		opacity: 1;
		border-radius: 4rpx;
		line-height: 64rpx;
		text-align: center;
		margin: 26rpx auto;
		font-size: 28rpx;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #414F58;
	}
</style>
